<template>
    <div>
        <!-- 第一行 -->
        <el-row class="grid-row" type="flex" justify="center" align="middle" style="height: 60vh;">
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; transform: translateY(0px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px;  transform: translateY(50px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px;  transform: translateY(120px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row id="login" class="grid-row" type="flex" justify="center" align="middle" style="height: 60vh;">
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 20px; transform: translateY(0px);">
                    <div class="icon"><i class="el-icon-picture-outline" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <!-- 登录框 -->
                <el-card class="login-card" style="width: 90%; height: 300px; margin-top: 20px;transform: translateY(50px);">
                    <h2 style="text-align: center;margin-bottom: 20px;">用户登录</h2>
                    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                        <el-form-item label="id" prop="id">
                            <el-input v-model="form.id" autocomplete="off" placeholder="请输入uid" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                v-model="form.password"
                                type="password"
                                autocomplete="off"
                                placeholder="请输入密码"
                            />
                        </el-form-item>
                    </el-form>

                        <el-row justify="right" align="middle" style="transform: translateX(80px)">
                            <el-col span=8>
                                <el-button type="primary" @click="loginPost">登录</el-button>
                            </el-col>
                            <el-col span=8>
                                <el-button type="primary" @click="signup">注册</el-button>
                            </el-col>
                            <el-col span=8>
                                <el-button type="primary" @click="()=>{
                                    this.$router.push('/');
                                }">返回</el-button>
                            </el-col>
                        </el-row>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 30px; transform: translateY(100px);">
                    <div class="icon"><i class="el-icon-umbrella" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row class="grid-row" type="flex" justify="center" align="middle" style="height: 50vh;">
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 10px; transform: translateY(20px);">
                    <div class="icon"><i class="el-icon-collection-tag" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: -30px; transform: translateY(60px);">
                    <div class="icon"><i class="el-icon-present" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
            <el-col :span="8" class="grid-item">
                <el-card class="card" style="width: 90%; height: 300px; margin-top: 20px; transform: translateY(80px);">
                    <div class="icon"><i class="el-icon-s-management" style="font-size: 120px"></i></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: '',
                password: '',
            },
            rules: {
                id: [
                    { required: true, message: '请输入uid', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        };
    },
    methods:{
        loginPost(){
            this.$axios.post(this.$httpUrl + '/user/login', {
                "id": this.form.id,
                "password": this.form.password,
            }).then(res => res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '登录成功',
                        type: 'success'
                    });
                    sessionStorage.setItem('user', JSON.stringify(res.data));
                    this.$router.replace('/shopping');
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '登录失败'
                    });
            })
        },
        signup(){
            this.$router.push('/userSignup');
        }
    },
    mounted() {



        window.scrollTo(0, 370);
        document.body.style.overflowY = 'hidden';
    }

};
</script>


<style>
.grid-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
.grid-item {
    margin: 5px;
}
.card {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.login-card {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}
.title {

}
.icon {
    text-align: center;
    line-height: 300px;
    height: 300px;
}

</style>